<template>
    <div class="base-container">
        <div class="query-form">
            <el-form :inline="true" :model="queryForm" ref="queryFormRef">
                <el-form-item label="菜单名称" prop="menuName">
                    <el-input v-model="queryForm.menuName" placeholder="请输入菜单名称" />
                </el-form-item>
                <el-form-item label="菜单状态" prop="menuState">
                    <el-select v-model="queryForm.menuState" placeholder="请选择菜单状态">
                        <el-option :label="item.label" :value="item.value" v-for="(item, index) in menuStateOptions" :key="'options'+index" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryHandler">查询</el-button>
                    <el-button type="primary" plain @click="resetQueryHandler(queryFormRef)" >重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="base-table">
            <div class="action">
                <el-button type="primary" @click="addHandler(1)" v-auth="'menu-create'">新增</el-button>
            </div>
            <el-table
                    :data="tableData"
                    row-key="_id"
                    border
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >
                <el-table-column
                        :prop="item.prop"
                        :label="item.label"
                        :width="item.width"
                        :formatter="item.formatter"
                        v-for="(item, index) in columns"
                        :key="item.prop"/>
                <el-table-column fixed="right" label="操作" width="220">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="addHandler(2,scope.row)" v-auth="'menu-create'"
                        >新增</el-button>
                        <el-button type="default" size="small" @click="editHandler(scope.row)" v-auth="'menu-edit'"
                        >编辑</el-button>
                        <el-popconfirm title="确定删除吗?" @confirm="deleteHandler(scope.row)">
                            <template #reference>
                                <el-button type="danger" size="small" v-auth="'menu-delete'">删除</el-button>
                            </template>
                        </el-popconfirm>

                    </template>
                </el-table-column>
            </el-table>
        </div>
        <menu-dialog ref="menuDialogRef" @submit="getTabelList"></menu-dialog>
    </div>
</template>

<script setup name="MenuView">
    import dayjs from 'dayjs'
    const { proxy } = getCurrentInstance()
    import MenuDialog from './dialogs/MenuDialog.vue'

    // query start
    const menuStateOptions = ref([
        { label: '正常', value: 1 },
        { label: '禁用', value: 2 },
    ])
    const queryForm = ref({
        menuState: 1
    })
    const queryFormRef = ref()
    const queryHandler = () => {
        // console.log('query')
        getTabelList()
    }
    const resetQueryHandler = (queryFormRef) => {
        if (!queryFormRef) return
        queryFormRef.resetFields()
    }
    // query end
    onMounted(()=>{
        getTabelList()
    })
    // table部分
    const tableData = ref([])
    const columns = ref([
        {prop: 'menuName', label: '菜单名称', width: 180},
        {prop: 'icon', label: '图标'},
        {prop: 'menuType', label: '菜单类型', formatter:(row, column, value)=>{
                return {
                    1: '菜单',
                    2: '按钮'
                }[value]
        }},
        {prop: 'menuCode', label: '权限标识'},
        {prop: 'path', label: '路由地址'},
        {prop: 'component', label: '组件路径'},
        {prop: 'menuState', label: '菜单状态', formatter:(row, column, value)=>{
                return {
                    1: '正常',
                    2: '禁用'
                }[value]
            }},
        {prop: 'createTime', label: '创建时间', formatter:(row, column, value)=>{
                return dayjs(value).format('YYYY-MM-DD')
        }}
    ])
    const menuDialogRef = ref()

    const getTabelList = async () => {
        tableData.value =  await proxy.$api.getMenuList(queryForm.value)
    }

    const addHandler = (type, row = {}) => {
        menuDialogRef.value.addAction(type, row)
    }
    const editHandler = (row) => {
        menuDialogRef.value.editAction(row)
    }
    const deleteHandler = () => {
        console.log('delete')
    }

</script>

<style scoped>
    :deep(.el-table__expand-icon){
        width: 22px !important;
    }
</style>
